import React, { useEffect, useState } from 'react'
import Son from './components/Son';

/**
 * 使用useEffect 模拟类组件的生命周期
 * 
 * 用法：
 * 1. useEffect(callback,[])  ==> componentDidMount
 * 2. useEffect(callback)     ==> componentDidMount + componentDidUpdate[所有的state和props]
 * 3. useEffect(callback, [状态数据，或props数据]) ==>componentDidMount + componentDidUpdate[监听的才有]
 * 
 * 4. useEffect(()={
 *    return ()=>{ // componentWillUnmount
 * 
 *    }
 * })
 * @returns 
 */

export default function App() {
    
    let [count, setCount] = useState(0);
    let [msg, setMsg] = useState('atguigu');
    // 用法1：
    // useEffect(()=>{ // componentDidMount
    //     console.log('111');
    // }, []);

    // 用法2：
    // useEffect(()=>{ // componentDidMount + componentDidUpdate[所有的state数据、props数据变化都会触发]
    //     console.log('222');
    // })

    // 用法3:
    useEffect(()=>{ // componentDidMount + componentDidUpdate[监听的数据]
        console.log('333')
    },[count])

    // useEffect可以调用多次
    useEffect(()=>{
        console.log('我是挂载的生命周期1');
    },[])
    useEffect(()=>{
        console.log('我也是挂载的生命周期2');
    },[])
    useEffect(()=>{
        console.log('我也是挂载的生命周期3');
    },[])
    return (
        <div>
            <p>count: { count}</p>
            <p>msg: {msg}</p>
            <p><button onClick={()=>{
                setCount(count + 1)
            }}>count++</button></p>
            <p><button onClick={()=>{
                setMsg(msg + '-')
            }}>msg --</button></p>

            <hr/>
            {count % 2 && <Son/>}
        </div>
    )
}
